import React, { Component } from 'react'
import { Grid } from 'antd-mobile'
import { array, func } from 'prop-types'

class HotCate extends Component {
  render() {
    const { data, onClick } = this.props
    return (
      <div className='cookbook-hot-cate'>
        <div className='title'>热门分类</div>
        <Grid
          data={data}
          columnNum={4}
          activeStyle={false}
          renderItem={(dataItem, index) => {
            return <div className='item'>{dataItem.title}</div>
          }}
          onClick={row => {
            onClick(row)
          }}
        />
      </div>
    )
  }
}

HotCate.propTypes = {
  data: array.isRequired,
  onClick: func
}
HotCate.defaultProps = {
  onClick: () => {}
}

export default HotCate
